<template>
  <MHeader :title="'商品详'"/>
  <div class="detail-wrapper">
    <Swiper :list="detail.carouselList"/>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue';
import MHeader from "@/components/MHeader/index.vue";
import {useRoute} from "vue-router";
import {closeToast, showLoadingToast, showToast} from "vant";
import {SUCCESS_CODE} from "@/constants";
import getGoodDetailAPI, {type IGoodItem} from "@/api/goods/getGoodDetailAPI";
import useLoading from "@/hooks/useLoading";
import Swiper from "@/components/Swiper/src/index.vue";
import type {ISwipeItem} from "@/components/Swiper";

const route = useRoute();

console.log(route.params.id);
const {isLoading, toggle} = useLoading();

const detail = ref<IGoodItem & { carouselList: ISwipeItem[] } | null>(null);

const handleSearch = async () => {
  if (isLoading.value) {
    return
  }
  try {
    showLoadingToast({
      message: '加载中...',
      forbidClick: true
    });
    toggle(true)
    const response = await getGoodDetailAPI(route.params.id as string)
    if (response.code === SUCCESS_CODE) {
      const carouselList: ISwipeItem[] = response.data.goodsCarouselList.map(item => ({
        imageUrl: item,
        redirectUrl: ''
      }))
      detail.value = {...response.data, carouselList: carouselList};
      console.log(detail.value);
    }
  } catch (e: any) {
    showToast(e.message);
  } finally {
    toggle(false)
    closeToast();
  }
}
handleSearch();
</script>